<template>
  <view class="quality-ball-page">
    <view class="remark-wrap">
      <textarea
        class="remark"
        placeholder="请输入问题描述，越详细越好"
        placeholder-class="remark-placeholder"
        v-model="remark"
      ></textarea>
    </view>

    <view class="add-image-wrap">
      <image v-if="img_src" class="add-image" :src="img_src" @tap="uploadImage"></image>
      <view v-else class="add-image" @tap="uploadImage">
        <u-icon name="plus" size="150px" color="#999999"></u-icon>

        <!-- <image src='/static/icon/icon.png' class='image-icon'></image> -->
      </view>
    </view>

    <view class="footer-wrap">
      <view class="footer-btn" @tap="handleSubmit">提交</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        remark: '', // 备注
        question_type: '问题反馈', // 问题类型
        brand: '', // 手机品牌
        model: '', // 手机型号
        version: '', // 微信版本号
        system: '', // 操作系统版本
        platform: '', // 客户端平台
        SDKVersion: '', // SDKVersion
        page_path: '', // 页面路径
        img_src: '', // 图片路径
      }
    },
    onLoad() {
      // 获取系统信息
      let _this = this
      uni.getSystemInfo({
        success(res) {
          const { brand, model, version, system, platform, SDKVersion } = res
          _this.brand = brand
          _this.model = model
          _this.version = version
          _this.system = system
          _this.platform = platform
          _this.SDKVersion = SDKVersion
        },
        fail(err) {
          console.log(err)
        },
      })
      // 获取上一个页面的路径
      let pages = getCurrentPages()
      this.page_path = pages[0].route
    },
    methods: {
      // 点击提交
      handleSubmit() {
        if (!this.remark) {
          uni.showToast({
            title: '问题描述不能为空',
            icon: 'none',
          })
          return
        }
        if (!this.img_src) {
          uni.showToast({
            title: '请上传图片',
            icon: 'none',
          })
          return
        }
        let html = '页面路径:\n\t' + this.page_path + '\n\t------------------\n\t'
        html += '附件地址:\n\t' + '![test_img](' + this.img_src + ')' + '\n\t------------------\n\t'
        html += '问题描述:\n\t' + this.remark + '\n\t------------------\n\t'
        html += '手机基本信息:\n\t' + '手机品牌  ' + this.brand + '\n\t'
        html += '手机型号  ' + this.model + '\n\t'
        html += '微信版本号  ' + this.version + '\n\t'
        html += '操作系统版本  ' + this.system + '\n\t'
        html += '客户端平台  ' + this.platform + '\n\t'
        html += '客户端基础库版本  ' + this.SDKVersion + '\n\t'
        let data = {
          uKey: '69dd308c52043223d3da87fedf98450f',
          _api_key: 'c3454efa2c2a4077102156567b089b36',
          pKey: 'd0925fafe852636ad5058688195e3a95',
          issueTitle: this.remark,
          issueType: '问题反馈',
          issueDescription: html,
        }
        uni.request({
          url: 'http://www.tracup.com/apiv1/issue/create',
          method: 'POST',
          data,
          header: {
            'content-type': 'application/x-www-form-urlencoded', // 默认值
          },
          success(res) {
            let data = res.data
            if (data.code == 0) {
              uni.showToast({
                title: '提交成功',
                duration: 1000,
              })
              setTimeout(function () {
                uni.navigateBack({
                  delta: 1,
                })
              }, 1000)
            }
          },
          fail(res) {
            console.log(res)
          },
          complete(res) {
            // complete
          },
        })
      },

      // 上传图片
      uploadImage() {
        let _this = this
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success(res) {
            console.log(res)
            // tempFilePath可以作为img标签的src属性显示图片
            var filePath = res.tempFilePaths[0]
            console.log(filePath)
            uni.uploadFile({
              url: 'http://chuanxi.121.soft1024.com/Api/uploadImage/appid/1/submit/submit',
              method: 'POST',
              name: 'upfile',
              filePath,
              header: {
                'content-type': 'application/x-www-form-urlencoded', // 默认值
              },
              success(res) {
                let data = res.data
                data = JSON.parse(data)
                if (data.code == 0) {
                  _this.img_src = data.file_path
                  uni.showToast({
                    title: '上传成功',
                  })
                }
              },
            })
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  page {
    padding-bottom: 128rpx;
    background: #fff;
  }

  .remark-wrap {
    height: 500rpx;
    padding: 20rpx;
  }

  .remark {
    width: 670rpx;
    height: 460rpx;
    padding: 20rpx;
    font-size: 32rpx;
    line-height: 40rpx;
    border: 1rpx solid #f0f0f0;
  }

  .remark-placeholder {
    line-height: 40rpx;
  }

  .add-image-wrap {
    padding: 20rpx;
  }

  .add-image {
    width: 300rpx;
    height: 300rpx;
    border: 1rpx solid #f0f0f0;
  }

  .image-icon {
    width: 100rpx;
    height: 100rpx;
    margin: 100rpx;
  }

  .footer-wrap {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20rpx;
    background-color: #fff;
    border-top: 1rpx solid #f0f0f0;
  }

  .footer-btn {
    display: flex;
    width: 100%;
    height: 98rpx;
    color: #fff;
    background-color: green;
    border-radius: 5rpx;
    justify-content: center;
    align-items: center;
  }
</style>
